<template>
  <el-row class="container flex-column">
    <el-row class="top-header p-10">
      <el-row class="flex-max search">
        <el-input v-model="search" style="width: 240px" placeholder="搜索..." clearable class="m-r-10" />
        <span class="center-vertical f14 m-r-5">时长大于:</span>
        <el-input type="number" v-model="duration" style="width: 100px" clearable class="m-r-10" />
        <el-button type="primary" v-if="!loading" @click="searchData" style="width: 90px" plain>
          <span class="iconfont iaiai-search f20 m-r-5"></span>搜索
        </el-button>
        <el-button type="primary" v-if="loading" :loading="loading" style="width: 90px">搜索</el-button>
      </el-row>
    </el-row>

    <el-row class="flex-max pr">
      <el-table :data="tableData" height="100%" class="pa-fill">
        <el-table-column label="创建时间" width="200">
          <template #default="scope">
            {{timestampToDateString(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="时长(毫秒)" width="100" />
        <el-table-column prop="url" label="请求地址" width="500" class-name="f12" />
        <el-table-column prop="ipv4" label="ipv4" width="160" />
        <el-table-column prop="ipv6" label="ipv6" width="200" />
        <el-table-column prop="ipAddress" label="所在地区" width="200" />
        <el-table-column prop="method" label="请求方式" width="80" />
        <el-table-column prop="userAgent" label="UA" width="900" class-name="f12" show-overflow-tooltip />
        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template #default="scope">
            <el-row class="flex-row center-flex">
              <el-button link type="primary" @click.stop="detail(scope.row)">
                详情
              </el-button>
            </el-row>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="无数据" />
        </template>
      </el-table>
    </el-row>

    <el-row class="container-page center-vertical p-lr-10">
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="limit"
          :total="total"
          layout="sizes, prev, pager, next, total"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="tableSelect"
          @current-change="chagePage"/>
    </el-row>

    <detailView ref="detailComp"/>
  </el-row>
</template>

<script lang="ts" setup>
import {inject, onMounted, ref} from "vue"
import {timestampToDateString} from "@/core/util/date_util"
import detailView from "./log_request_detail.vue"

const $api = inject('$api')
const $post = inject('$post')
const page = ref(0)
const limit = ref(20)
const total = ref(0)
const search = ref("")
const duration = ref(null)
const loading = ref(true)
const tableData = ref([])
const detailComp = ref(null)

onMounted(()=>{
  getData()
})

function detail(log:any){
  detailComp.value.showComp(log)
}

function searchData(){
  page.value = 0
  loading.value = true
  getData()
}

function getData(){
  $post($api.logRequestList,{
    "page": page.value + 1,
    "limit": limit.value,
    "search": search.value,
    "duration": duration.value,
  }).then((res:any)=>{
    tableData.value = res.data.result.records
    total.value = res.data.result.total
    page.value = res.data.result.current
    loading.value = false
  })
}

function tableSelect(n:number){
  limit.value = n
  searchData()
}

function chagePage(n: number){
  page.value = n - 1
  getData()
}
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  background-color: white;

  .top-header{
    border-bottom: 1px #efefef solid;
  }
}
</style>
